<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入video.js的css和js -->
		<!-- 链接地址 https://www.bootcdn.cn/video.js/ -->
		<link href="https://cdn.bootcss.com/video.js/7.6.0/alt/video-js-cdn.min.css" rel="stylesheet">
		<script src="https://cdn.bootcss.com/video.js/7.6.0/alt/video.core.min.js"></script>
	</head>
	<body>
		<!-- 设置height只会动态的调整tbody的高度 -->
		<!-- cellpadding只能在table标签上设置 -->
		<table border="1" cellspacing=0 width="100%" height="400" border="" cellspacing="" cellpadding="">
			<!-- tr 代表行 -->

			<caption>英雄列表</caption><!-- tfoot,tbody,thead会自动根据语义标签排列，而不是文档顺序 -->

			<tfoot>
				<tr>
					<td bgcolor="#fdfd9c">合计</td>
					<td colspan="7"></td>

				</tr>
			</tfoot>
			<!-- align属性可给tbody,br,td用，给talbe便签使用没有效果 -->
			<tbody align="right">
				<tr>
					<td>德玛西亚之力</td>
					<td>男</td>
					<td>大保健</td>
					<td>大保健</td>
					<td>大保健</td>
					<td>大保健</td>
					<td>回血</td>
					<td>500</td>
				</tr>
				<tr>
					<td>德玛西亚之力</td>
					<td>男</td>
					<td>大保健</td>
					<td>大保健</td>
					<td>大保健</td>
					<td>大保健</td>
					<td>回血</td>
					<td>500</td>
				</tr>
			</tbody>

			<thead>
				<tr>
					<th rowspan="2">名字</th>
					<th rowspan="2">性别</th>
					<th colspan="4">技能</th>
					<th rowspan="2">被动 </th>
					<th rowspan="2">HP</td>
				</tr>
				<tr>
					<th>Q</th>
					<th>W</th>
					<th>E</th>
					<th>R</th>
				</tr>

			</thead>

		</table>
		<details>
			<summary>苹果</summary>
			<p>苹果（学名：Malus pumila）是水果的一种，是蔷薇科苹果亚科苹果属植物，其树为落叶乔木。苹果的果实富含矿物质和维生素，是人们经常食用的水果之一。</p>
		</details>
		<!-- 水平分割线 -->
		<hr color="red" width="50" align="right">
		<p>2015年3月5日上午十二届全国人大三次会议上,李克强总理在政府工作报告中首次提出 <span>互联网+</span> 行动计划</p>
		<hr>
		<main>
			<span>下载中：</span>
			<progress>
		</main>

		<main>
			<span>当前进度：</span>
			<progress value="80" max="100">
		</main>
		<audio  controls loop>
			<source src="media/水边的阿狄丽娜--Richard Clayderman.mp3" type="audio/mpeg">
			<!-- <source src="media/SmallLucky.ogg" type="audio/ogg"> -->
		</audio>
		<hr>
		<!-- 给video一个id -->
		<video id="my-video" class="video-js"  controls preload >
			<source src="media/big_buck_bunny_480p_5mb.mp4" type="video/mp4">	
		</video>
		<button id="mute-btn">暂停</button>
		<script type="text/javascript">
			// 初始化videojs
			videojs('my-video');
			// let muteBtn = document.getElementById('mute-btn');
			// let video = document.getElementById('my-video');
			// muteBtn.onclick = function(e){
			// 	video.pause();
			// 
			// }
		</script>
	</body>
</html>
